<!--
 * @Author: 曹捷
 * @Date: 2020-06-18 17:53:32
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-12-08 11:33:24
 * @Description: 自定义  input 组件
-->
<template>
  <view class="uni-input-wrapper" v-if="inputType === 'input' || inputType === 'number' || inputType==='text'">
    <input :placeholder="placeholder" :disabled="disabled" :type="inputType" :value="inputClearValue"
      @input="clearInput" class="uni-input" @blur="blur" @confirm="confirm" confirm-type="search" />
    <text @click="clearIcon" class="uni-icon" v-if="showClearIcon && clear">&#xe434;</text>
    <slot></slot>
  </view>
  <view class="uni-input-wrapper" v-else-if="inputType === 'password'">
    <input :password="showPassword" :disabled="disabled" :placeholder="placeholder" :value="inputClearValue"
      @input="clearInput" class="uni-input" />
    <text :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword" class="uni-icon"
      v-if="showClearIcon">&#xe568;</text>
  </view>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'input',
    },
    value: {
      type: [Number, String],
    },
    clear: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: '请选择',
    },
  },
  data () {
    return {
      inputClearValue: this.value,
      showClearIcon: false,
      showPassword: true,
      // 兼容小程序，小程序underfind 传空字符串过来了
      inputType: this.type,
    }
  },
  mounted () {
    if (!this.inputType) {
      this.inputType = 'input'
    }
  },
  watch: {
    value (value, oldvalue) {
      this.inputClearValue = value
    },
    inputClearValue (value, oldvalue) {
      this.$emit('input', this.inputClearValue)
      this.$emit('change', this.inputClearValue)
    },
  },
  methods: {
    blur () {
      console.log('blur: ', 1);
      this.$emit('blur', this.inputClearValue)
    },
    confirm () {
      console.log('confirm: ', 2)
      uni.hideKeyboard()
      // this.$emit('blur', this.inputClearValue)
    },
    clearInput: function (event) {
      this.inputClearValue = event.detail.value
      if (event.detail.value.length > 0) {
        this.showClearIcon = true
      } else {
        this.showClearIcon = false
      }
    },
    changePassword: function () {
      this.showPassword = !this.showPassword
    },
    clearIcon: function () {
      this.inputClearValue = ''
      this.showClearIcon = false
    },
  },
}
</script>

<style>
.uni-input-wrapper {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  padding: 8px 13px;
  width: auto;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: #ffffff;
}
.input-placeholder {
  color: #999999;
}
.uni-input {
  height: 28px;
  line-height: 28px;
  font-size: 15px;
  padding: 0px;
  flex: 1;
  background-color: #ffffff;
}

.uni-icon {
  font-family: uniicons;
  font-size: 24px;
  font-weight: normal;
  font-style: normal;
  width: 24px;
  height: 24px;
  line-height: 24px;
  color: #999999;
}

.uni-eye-active {
  color: #007aff;
}
</style>
